Skip to content

Complete tailwind v4 configuration - #806

Merged
tjementum merged 4 commits into
platformplatform:mainfrom
raix:fix-tailwind-v4-configuration
Dec 18, 2025
Merged

Complete tailwind v4 configuration#806
tjementum merged 4 commits into
platformplatform:mainfrom
raix:fix-tailwind-v4-configuration

Conversation

@raix

@raix raix commented Dec 17, 2025 •
edited by tjementum
Loading

Copy link
Copy Markdown
Contributor

Upgrade to Tailwind CSS v4 with federated module scoping

Summary & Motivation

Upgrade to Tailwind CSS v4 and implement scoped CSS loading for federated modules to prevent style conflicts in the micro-frontend architecture. With Tailwind v4, CSS is processed at build time rather than runtime, requiring explicit load order control when multiple self-contained systems load styles in the same page.

  • Add TailwindPlugin with selector prefixing to scope styles per self-contained system (e.g., #account-management .button vs #back-office .button)
  • Move theme CSS variables from tailwind.css to separate theme.css file
  • Update Tailwind import style from @import "tailwindcss/theme" to @import "tailwindcss" with @theme blocks
  • Remove deprecated v3 tailwind-preset package and delete tailwind.config.ts files
  • Add React Aria MCP server configuration for frontend agents

Downstream projects

  1. Move any customization done in @application/shared-webapp/ui/tailwind.css to @application/shared-webapp/ui/theme.css. The theme.css file now contains all CSS custom properties (color variables, radius, etc.) while tailwind.css contains Tailwind configuration and utility classes.

  2. Add an id attribute to the <body> tag in your-self-contained-system/WebApp/public/index.html:

    - <body>
+ <body id="your-self-contained-system">
    <div id="root"></div>
  </body>

  3. Update your-self-contained-system/WebApp/bootstrap.tsx to import theme.css before tailwind.css:

    + import "@repo/ui/theme.css";
  import "@repo/ui/tailwind.css";

  4. Update your-self-contained-system/WebApp/rsbuild.config.ts to use the new TailwindPlugin with a scoping prefix:

    + import { TailwindPlugin } from "@repo/build/plugin/TailwindPlugin";
  import { defineConfig } from "@rsbuild/core";

  export default defineConfig({
    plugins: [
+     TailwindPlugin("#your-self-contained-system"),
      pluginReact(),
      // ... other plugins
    ]
  });

  5. Delete your-self-contained-system/WebApp/tailwind.config.ts (Tailwind v4 configuration is now in @application/shared-webapp/ui/tailwind.css)

Checklist

  • I have added tests, or done manual regression tests
  • I have updated the documentation, if necessary

@raix
raix requested a review from a team as a code owner December 17, 2025 14:18
nickdekesel
nickdekesel reviewed Dec 17, 2025
View reviewed changes
Comment thread application/package.json Outdated
@tjementum
tjementum force-pushed the fix-tailwind-v4-configuration branch from 966674d to 45321ff Compare December 18, 2025 00:04
@tjementum tjementum self-assigned this Dec 18, 2025
@tjementum tjementum added Bug Something isn't working Enhancement New feature or request labels Dec 18, 2025
@tjementum tjementum moved this to 🏗 In Progress in Kanban board Dec 18, 2025
@tjementum
tjementum enabled auto-merge December 18, 2025 00:15
@tjementum
tjementum merged commit 2a61348 into platformplatform:main Dec 18, 2025
25 of 27 checks passed
@github-project-automation github-project-automation Bot moved this from 🏗 In Progress to ✅ Done in Kanban board Dec 18, 2025
@tjementum tjementum linked an issue Dec 18, 2025 that may be closed by this pull request
[Bug]: Tailwind preset content paths not applied causing missing utilities (e.g. md:flex) #801
Closed
2 tasks
@raix
raix deleted the fix-tailwind-v4-configuration branch December 20, 2025 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tjementum tjementum tjementum approved these changes
+1 more reviewer
@nickdekesel nickdekesel nickdekesel left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

@tjementum tjementum

Labels

Bug Something isn't working Enhancement New feature or request

Projects

Kanban board
Status: ✅ Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: Tailwind preset content paths not applied causing missing utilities (e.g. md:flex)

3 participants

@raix @tjementum @nickdekesel